<template>
	<view class="page_box">
		<u-navbar :is-back="false" title="趣赚" v-if="1" :border-bottom="false"></u-navbar>

		<view class="content_box bg-img u-skeleton">
			<navigator hover-class="none" url="./hall_rules" class="rule-btn u-skeleton-fillet">大厅规则</navigator>
			<view class="funearn-title flex justify-center u-skeleton-rect">
				<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_fun_text.png" class="img"></image>
			</view>
			<view class="funearn-ljjr flex justify-center margin-top-lg" @click="popupshow = true">
				<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/btn_ljjr.png" class="img"></image>
			</view>
			<view class="content-item margin-top-xs" style="margin-bottom: 50rpx;">
				<view class="card-box u-skeleton-fillet">
					<view class="card-title flex align-center justify-center">
						<i class="cuIcon-title f28"></i>
						<text class="margin-lr-xs">当前红利期消费商用户已有36名</text>
						<i class="cuIcon-title f28"></i>
					</view>
					<swiper
						class="card-list" 
						style="height: 300rpx;"
						:vertical="true" 
						:display-multiple-items="4"
						:circular="true" 
						:autoplay="true" 
						:interval="600" 
						duration="10000">
						<swiper-item class="item flex align-center justify-between" v-for="(item,index) in swiper_item" :key="index">
							<view class="flex align-center">
								<u-avatar size="60" mode="circle" :src="item.avatar"></u-avatar>
								<view class="margin-left-sm">
									<text class="f26 hidden">{{item.nickname}}</text>
									<text class="f26">{{item.tipc}}</text>
								</view>
							</view>
							<text class="f22">{{item.time}}</text>
						</swiper-item>
					</swiper>
				</view>
				<view class="card-box u-skeleton-fillet">
					<view class="text-center" style="margin-top: -60rpx;">
						<view class="card-title-btn flex align-center justify-center">
							<text class="text-white">如何赚钱</text>
						</view>
					</view>
					<view class="card-context flex">
						<i class="cuIcon-title f38"></i>
						<text class="f26 margin-left-sm" style="line-height: 50rpx;">用户需要在去消费服务大厅完成消费，当消费金额达到5万及以上，即可有机会获得消费金额的免单。</text>
					</view>
				</view>
				<view class="card-box u-skeleton-fillet">
					<view class="text-center" style="margin-top: -60rpx;">
						<view class="card-title-btn flex align-center justify-center">
							<text class="text-white">什么是消费商</text>
						</view>
					</view>
					<view class="card-context flex">
						<i class="cuIcon-title f38"></i>
						<text class="f26 margin-left-sm" style="line-height: 50rpx;">消费商是指在平台内完成5万及以上的消费并且成功认缴6500，或者实缴纳3500，即可成为消费商。进入消费商大厅需要认缴6500元/年或实缴3650元/年，才能享受“消费商”一切特权，您可选择任意一种缴纳方式。 保持消费商的身份需要每年在平台上续费</text>
					</view>
				</view>
			</view>
			<!-- 弹窗 -->
			<u-popup 
				v-model="popupshow" 
				mode="bottom" 
				safe-area-inset-bottom="true" 
				border-radius="20" 
				length="auto"
				closeable="true"
				>
				<view class="popup-content">
					<view class="popup-title text-center f30">请选择缴纳方式</view>
					<view class="popup-tipc text-center f24">
						<text>成为可炫耀的用户</text>
						<text>请进行以下认缴6600积分/年或实缴3650元/年</text>
					</view>
					<u-radio-group 
						v-model="radioValue"
						label-size="30"
						active-color="#FFB81E"
						wrap="true"
					>
						<u-radio name="0">认缴</u-radio>
						<view class="radio-tipc">本次不产生扣费，当您在平台赚取佣金后，平台将从您的收益里扣取6500积分。</view>
						<u-radio name="1">实缴</u-radio>
						<view class="radio-tipc">本次扣费后，为实际支付3650元/年。</view>
					</u-radio-group>
					<button class="circle-btn" @click="determine()">确定</button>
					<view class="flex align-center justify-center margin-top-sm">
						<u-checkbox
							active-color="#4A515B"
							shape="circle"
							label-size="22"
							size='26'
							v-model="funearn_mode"
							name="rule_name"
						>支付即代表同意</u-checkbox>						
						<navigator url="./hall_rules" hover-class="none" class="text-yellow f22">《消费大厅规则》</navigator>
					</view>	
				</view>
			</u-popup>
		</view>
		
		<!--骨架组件-->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
		<!-- 弹窗 -->
		<u-modal 
			v-model="modal_show" 
			:show-cancel-button="true" 
			title="认缴提示" 
			content="本次不产生扣费，当您在平台赚取佣金后，平台将从您的收益里扣取6500积分。"
			@confirm="confirm"
		>
		</u-modal>

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading:true,
			swiper_item:[{
				avatar:"https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/custserv_avatar.png",
				nickname:"恭喜玛卡巴卡",
				tipc:"成功获得免单",
				time:"2020.03.23"
			},{
				avatar:"https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/custserv_avatar.png",
				nickname:"恭喜玛卡巴卡",
				tipc:"成功获得免单",
				time:"2020.03.23"
			},{
				avatar:"https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/custserv_avatar.png",
				nickname:"恭喜玛卡巴卡",
				tipc:"成功获得免单",
				time:"2020.03.23"
			},{
				avatar:"https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/custserv_avatar.png",
				nickname:"恭喜玛卡巴卡",
				tipc:"成功获得免单",
				time:"2020.03.23"
			},{
				avatar:"https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/custserv_avatar.png",
				nickname:"恭喜玛卡巴卡",
				tipc:"成功获得免单",
				time:"2020.03.23"
			}],
			popupshow:false,
			radioValue:"0",
			funearn_mode:true,
			modal_show:false,
		};
	},
	onShow() {},
	onLoad(e) {
		// 通过延时模拟向后端请求数据，调隐藏骨架屏
		setTimeout(() => {
			this.loading = false;
		}, 2000)
	},
	mounted() {},
	methods: {
		determine() {
			if(this.funearn_mode){
				if(this.radioValue == 1){
					uni.navigateTo({
						url:'../pay/pay'
					})
				}else{
					this.modal_show = true
				}
			}else{
				uni.showToast({
					title:"请勾选消费大厅规则",
					icon:'none'
				})
			}			
		},
		confirm(){
			uni.showToast({
				title:"认缴成功",
				icon:"none"
			})
			setTimeout(()=>{
				uni.navigateTo({
					url:'../funEarn/funEarningHall'	
				})
			},1000)
		}
	}
};
</script>

<style lang="scss" scoped>
.content_box {
	width: 100vw;
	height: 100vh;
	position: relative;
	background-image:url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210618180154.png);
	.rule-btn{
		padding: 12rpx 22rpx 12rpx 36rpx;
		background: #ffffff;
		border-radius: 30rpx 0rpx 0rpx 30rpx;
		font-size: 26rpx;
		color: #0E1466;
		position: absolute;
		right: 0;
		top: 2%;
	}
	.funearn-title{
		margin-top: 108rpx;
		.img{
			width: 534rpx;
			height: 154rpx;
		}
	}
	.funearn-ljjr{
		.img{
			width: 246rpx;
			height: 58rpx;
		}
	}
	.card-box{
		padding: 20rpx;
		position: relative;
		background-color: white;
		border-radius: 20rpx;
		margin-bottom: 80rpx;
		.card-title{
			padding: 14rpx 0;			
		}
		.cuIcon-title{
			color: #FED252;
		}
		.card-title-btn{
			background: #8787ff;
			border-radius: 40rpx;
			padding: 18rpx 50rpx;
			display: inline-block;			
		}
		.card-list{
			.item{
				padding: 20rpx 0;
				border-bottom: 1rpx solid #F8F8F8;
			}
		}
		.card-context{
			padding: 28rpx 0;
		}
	}
	.popup-content{
		padding: 50rpx 22rpx;
		.popup-tipc{
			margin-bottom: 70rpx;
			color: #999999;
			margin-top: 40rpx;
			text{
				padding: 4rpx 0;
				display: block;
			}
		}
		.radio-tipc{
			color: #717171;
			font-size: 26rpx;
			margin-left: 40rpx;
			line-height: 48rpx;
			margin-bottom: 60rpx;
			margin-top: 26rpx;
		}
		.circle-btn{
			background: #4a515b;
			color: #FFFFFF;
			border-radius: 45rpx;
			font-size: 30rpx;
			font-weight: 500;
			line-height: 90rpx;
		}
	}
}
</style>
